{% extends "base.html" %}
{% block title %}幼儿管理{% endblock %}
{% block head %}
    {{ super() }}

<script>	
$(function () {
	var vm = new Vue({
		el: '#form-user-add',
		data: {
			name: '',
			admin: '1',
			password1: '',
			password2: ''
		},
		methods: {
			submit: function (event) {
				event.preventDefault();
                if (! this.name.trim()) {
                    return alert('请输入名字');
                }
                if (this.password1.length < 6) {
                    return alert('口令长度至少为6个字符');
                }
                if (this.password1 !== this.password2) {
                    return alert('两次输入的口令不一致');
                }
				postApi('/api/user', {
					name: this.name,
					admin: this.admin,
					password: CryptoJS.MD5(this.password1).toString(),
				}, function (err, r) {
					if (err) {
						showError(err);
					}
					else {
						return location.assign('/');
					}
				});
			}
		}
	});
});

{% endblock %}

{%block panel%}
<div class="tm-panel  uk-panel uk-panel-box  ">                        
	<div class="uk-panel-title">幼儿管理</div>
	<div class="uk-panel-li"><a href="/kids/add">宝宝入园</a></div> 
	<div class="line"></div>
	<div class="uk-panel-li"><a href="/kids">宝宝信息</a></div>
</div>
{%endblock%}
					
{% block content %}
<div class="tit"><a href="/">主页 </a>  》 <a href="/">幼儿管理 </a></div>
<div class="divmain-title">幼儿入园登记</div>				

<ul class="uk-tab" data-uk-tab="{connect:'#tab-content'}">
	<li class="uk-active"><a href="#">基本信息</a></li>
	<li><a href="#">加入照片</a></li>
	
</ul>

<ul id="tab-content" class="uk-switcher uk-margin">
	<li class="uk-active">				

<div class="divmain" id="form-user-add" >
<form  v-on="submit: submit" class="uk-form uk-form-horizontal">

<div class="uk-form-row ">
	<label class="uk-form-label" for="name">名字:</label>
	<div class="uk-form-controls">
		<input v-model="name" id="name" type="text"  placeholder="名字" >
	</div>
</div> 	

<div class="uk-form-row ">
	<label class="uk-form-label">输入口令:</label>
	<div class="uk-form-controls">
		<input v-model="password1" type="password" maxlength="50" placeholder="输入口令" class="">
	</div>
</div>
<div class="uk-form-row ">
	<label class="uk-form-label">重复口令:</label>
	<div class="uk-form-controls">
		<input v-model="password2" type="password" maxlength="50" placeholder="重复口令" class="">
	</div>
</div>
<div class="uk-form-row ">
	<label class="uk-form-label">是否管理员:</label>
	<div class="uk-form-controls">
		<input v-model="admin" type="checkbox" > 
	</div>
</div>

<div class="divbutton">
<button type="submit" class="uk-button uk-button-primary"> 加入</button>
</div>

</form>
</div>

</li>

<li>						
<div class="divmain" id="form-kid-add" >					
	<div id="upload-drop" class="uk-placeholder uk-text-center">
		<i class="uk-icon-cloud-upload uk-icon-medium uk-text-muted uk-margin-small-right"></i> 将文件拖拽至此 或 <a class="uk-form-file"><input id="upload-select" type="file"></a>.
	</div>
	<div id="progressbar" class="uk-progress uk-hidden">
		<div class="uk-progress-bar" style="width: 0%;">0%</div>
	</div>						
		<div id="divphoto">
	 <div id="photo">
	
	 </div>
	</div>
</div>						
</li>
					
</ul>
{%endblock%}
             